
$(function () {
    // 1请求获取四个表格数据/admin/data/info
    function getDataInof() {
        $.get("/admin/data/info", function (res) {
            let data = res
            $(".totalCount em").text(data.totalArticle)
            $(".totalCount_day em").text(data.dayArticle)
            $(".commentCount em").text(data.totalComment)
            $(".commentCount_day em").text(data.dayComment)
        })
    }
    
    // 2日增文章数据使用/admin/data/article
    function getNewarticleChars() {
        $.get("/admin/data/article", function (res) {
            // console.log(res)
            let data = res.date
            let dayChars = echarts.init($("#day_article_show")[0])
            let options = {
                //2.0.1标题文章开头
                title: {
                    text: '日增文章',
                    left: 'center'
                },
                // 2.0.2 设置图表类型以及设置图标显示的数据
                series:[{
                    name: '日增数量',
                    type: 'line',
                    smooth: true,
                    data: data.map(item => item.count),
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                     // 2.0.6 设置区域样式
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#ffffff' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }],
                 
                xAxis: {
                     name: '日期',
                    type: 'category', // category类型会自动从data属性中取数据作为x轴的值
                    boundaryGap: false,
                    data: data.map(item => item.date)  //来源于服务器json数据中的日期字段
                },
                yAxis: {
                     name: '数量',
                    type: 'value'
                },
                    // 2.0.4 设置鼠标放到轴上即显示数据详情
                tooltip: {
                    trigger: 'axis'
                },
                // 2.0.5 设置工具栏
                toolbox: {
                    show: true, //显示工具栏
                    feature: {
                        dataZoom: { //设置缩放
                            yAxisIndex: 'none' // 限制y轴缩放，只能X轴缩放
                        },
                        dataView: { readOnly: false }, // 允许编辑原始数据
                        magicType: { type: ['line', 'bar'] }, // 设置图表可以从line(折现图)和bar(柱状图)之前来回切换
                        restore: {},  // 设置重置数据
                        saveAsImage: {} // 设置保存图片
                    }
                }
            };
                         dayChars.setOption(options);
        })
    }
    // 3定义get_pie_show方法/admin/data/category
    function getPieShow() {
        $.get("/admin/data/category",function (res) {
            // console.log(res);
            let data = res.date
            let dayChars = echarts.init($('#pie_show')[0])
              let options = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                // 设置图例
                legend: {
                    orient: 'horizontal', // 图例为水平方向
                    left: 10,
                    data: data.map(item => item.name)  // 图例的数据
                },
                // 调环装颜色
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                series: [
                    {
                        name: '分类数量',
                        type: 'pie',
                        radius: ['40%', '55%'],                      
                        //  data只接受name和value属性名称的对象数组
                        data: data.map(item => ({ "name": item.name, "value": item.articles }))
                    }
                ]
            };
             dayChars.setOption(options);
        })
    }
    //  4柱形图请求方式
    function getColumnShow() {
        $.get("/admin/data/article", function (res) {
            console.log(res);
            let data = res.date
            let dayChars = echarts.init($("#column_show")[0])
            let options = {
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.date)
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    trigger: 'axis'
                },
                color: '#5885e8',
                series: [{
                    data: data.map(item => item.count),
                    type: 'bar',
                    barWidth: 25, // 设置柱子的宽度
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(000, 000, 000, 0)'
                    }
                }]
            };
              dayChars.setOption(options);
        })
    }
    getDataInof()
    getNewarticleChars()
    getPieShow()
    getColumnShow()
})